@font-face
{
    font-family: myCodeFont;
    src: url('../font/SourceCodePro-Medium.ttf');
} 
* {
    padding: 0 ;
    margin: 0 ;
}
html::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}
html {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

main.all-box {
    position: relative ;
    display: flex ;
    flex-direction: row ;
    justify-content: flex-start ;
    align-items: center ;
    flex-wrap: wrap ;
    height: auto ;
    width: 100vw ;
    .color-block {
        position: relative ;
        flex:0 auto ;
        width: 20% ;
        height: 180px ;
        overflow: hidden ;
        display: flex ;
        flex-direction: column ;
        justify-content: center ;
        align-items: center ;
        z-index: 0 ;
        transition: 0.2s ;
        
        .name-box,.val-box{
            position: absolute ;
            display: inline-block ;
            width: auto ;
            height: auto ;
            padding: 5px ;
            box-sizing: border-box;
            box-shadow: 0 0 10px rgba(99, 110, 114,0.5) ;
            transition: 0.2s ;
            display: flex ;
            flex-direction: column ;
            justify-content: center ;
            align-items: center ;
            z-index: 9 ;
            user-select: none ;
            h2 {
                position: relative ;
                font-size: 14px ;
                font-weight: 700 ;
                letter-spacing: 1.3px ;
                font-family: "myCodeFont";
            }
            &:hover {
                padding: 10px ;
            }
        }
        .name-box {
            top: 0px ;
            right: 0px ;
            border-bottom-left-radius: 5px ;
            background-color: white ;
            h2 {
                color: #636e72 ;
            }
        }
        .val-box {
            bottom: 0px ;
            right: 0px ;
            border-top-left-radius: 5px ;
            background-color: black ;
            h2 {
                font-size: 12px ;
                color: rgba(241,240,237,1) ;
            }
        }
        .color-block-btn {
            position: absolute;
            left: 0 ;
            top: 0 ;
            width: 100% ;
            height: 100% ;
            background: transparent ;
            outline: none ;
            border: none ;
            cursor: pointer ;
        }
        .color-display-val {
            font-family: "myCodeFont";
            position: absolute ; 
            z-index: -9999 ;
            font-size: 0px ;
            //user-select: none ;
        }
        &::before {
            content: "-GET-" ;
            font-family: "myCodeFont";
            position: relative ; 
            width: auto ;
            height: auto ;
            border: 1px solid rgba(236, 240, 241,1) ;
            border-radius: 6px ;
            font-size: 20px ;
            font-weight: 700 ;
            letter-spacing: 1.3px ;
            color: white ;
            padding: 10px ;
            padding-left: 20px ;
            padding-right: 20px ;
            transition: 0.2s ;
            opacity: 0 ;
        }
        &:hover::before {
            opacity: 1 ;
        }
        
    }
}

.canvas-1 {
    position: fixed ;
    background: white ;
    top: 0% ;
    right: 0% ;
    z-index: -10 ;
    width: 0% ;
    height: 0% ;
    outline: white solid 0px;
    transition: 0.2s ;
}
.canvas-2{
    position: fixed ;
    background: black ;
    bottom: 0% ;
    right: 0% ;
    z-index: -10 ;
    width: 0% ;
    height: 0% ;
    outline: black solid 0px;
    transition: 0.2s ;
}
.bottom-show-10{
    z-index: -10 !important ;
}
.top-white-10{
    outline:  white solid 99999px;
    z-index: 10 !important ;
}
.top-black-10{
    outline:  black solid 99999px;
    z-index: 10 !important ;
}
.top-show-100{
    z-index: 100 !important ;
}@font-face
{
    font-family: myCodeFont;
    src: url('../font/SourceCodePro-Medium.ttf');
} 
* {
    padding: 0 ;
    margin: 0 ;
}
html::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}
html {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

main.all-box {
    position: relative ;
    display: flex ;
    flex-direction: row ;
    justify-content: flex-start ;
    align-items: center ;
    flex-wrap: wrap ;
    height: auto ;
    width: 100vw ;
    .box-head {
        position: sticky  ;
        flex: 0 auto ;
        top: 0 ;
        left: 0 ;
        width: 100% ;
        height: 50px ;
        background: white ;
        box-shadow: 0 0 10px rgba(19,24,36,1.0) ;
        z-index: 10 ;
        display: flex ;
        flex-direction: row ;
        justify-content: flex-start ;
        align-items: center ;
        padding-left: 20px ;
        .iconfont {
            position: relative ;
            font-size: 18px ;
            font-weight: 700 ;
            text-shadow: 0 0 10px rgba(16,31,48,0.5) ;
            margin-right: 20px ;
        }
        a.back-btn {
            position: relative ;
            user-select: none ;
            font-weight: 700 ;
            font-family: "myCodeFont" ;
            cursor: pointer ;
            text-decoration: none ;
            color: #2d3436 ;
        }
    }
    .color-block {
        position: relative ;
        flex:0 auto ;
        width: 20% ;
        height: 200px ;
        overflow: hidden ;
        display: flex ;
        flex-direction: column ;
        justify-content: center ;
        align-items: center ;
        z-index: 0 ;
        transition: 0.2s ;
        
        .name-box,.val-box{
            position: absolute ;
            display: inline-block ;
            width: auto ;
            height: auto ;
            padding: 5px ;
            box-sizing: border-box;
            box-shadow: 0 0 10px rgba(99, 110, 114,0.5) ;
            transition: 0.2s ;
            display: flex ;
            flex-direction: column ;
            justify-content: center ;
            align-items: center ;
            z-index: 9 ;
            user-select: none ;
            h2 {
                position: relative ;
                font-size: 14px ;
                font-weight: 700 ;
                letter-spacing: 1.3px ;
                font-family: "myCodeFont";
            }
            &:hover {
                padding: 10px ;
            }
        }
        .name-box {
            top: 0px ;
            right: 0px ;
            border-bottom-left-radius: 5px ;
            background-color: white ;
            h2 {
                color: #636e72 ;
            }
        }
        .val-box {
            bottom: 0px ;
            right: 0px ;
            border-top-left-radius: 5px ;
            background-color: black ;
            h2 {
                font-size: 12px ;
                color: rgba(241,240,237,1) ;
            }
        }
        .color-block-btn {
            position: absolute;
            left: 0 ;
            top: 0 ;
            width: 100% ;
            height: 100% ;
            background: transparent ;
            outline: none ;
            border: none ;
            cursor: pointer ;
        }
        .color-display-val {
            font-family: "myCodeFont";
            position: absolute ; 
            z-index: -9999 ;
            font-size: 0px ;
            //user-select: none ;
        }
        &::before {
            content: "-GET-" ;
            font-family: "myCodeFont";
            position: relative ; 
            width: auto ;
            height: auto ;
            border: 1px solid rgba(236, 240, 241,1) ;
            border-radius: 6px ;
            font-size: 20px ;
            font-weight: 700 ;
            letter-spacing: 1.3px ;
            color: white ;
            padding: 10px ;
            padding-left: 20px ;
            padding-right: 20px ;
            transition: 0.2s ;
            opacity: 0 ;
        }
        &:hover::before {
            opacity: 1 ;
        }
        
    }
}
.canvas-1,.canvas-2 {
    position: fixed ;
    transition: 0.4s ;
    opacity: 0 ;
}
.canvas-1 {
    background: white ;
    top: 50% ;
    right: 50% ;
    z-index: -10 ;
    width: 0% ;
    height: 0% ;
    outline: white solid 4000px;
}
.canvas-2{
    background: black ;
    bottom: 50% ;
    right: 50% ;
    z-index: -10 ;
    width: 0% ;
    height: 0% ;
    outline: black solid 4000px;
}
.bottom-show-10{
    z-index: -10 !important ;
}
.top-white-10{
    outline:  white solid 4000px !important ;
    z-index: 10 !important ;
    opacity: 1 !important ;
}
.top-black-10{
    outline:  black solid 4000px !important ;
    z-index: 10 !important ;
    opacity: 1 !important ;
}
.top-show-100{
    z-index: 100 !important ;
    opacity: 1 !important ;
}